<template>
	<view>
		
		<view class="search">
			<view class="u-flex search-box" @click="jump('/pages/house/oldHouse/list?focus=1')">
				<view class="left-box u-flex">
					<text class="text">{{com_address.name}}</text>
					<!-- <text class="iconfont icon-xiasanjiaoxing"></text> -->
				</view>
				<view class="centre-box u-flex">
					<text class="iconfont icon-sousuo"></text>
					<text class="search-placeholder">搜索你需要的关键词</text>
				</view>
			</view>
		</view> 
		<view class="banner">
			<u-swiper @click="bannerClick" :list="banner" v-if="banner.length" :height="320" bg-color="#fffff" mode="none" :border-radius="40"></u-swiper>
		</view>
		<!-- 金刚区导航 -->
		<view class="nav-list u-flex u-flex-wrap">
			<view class="item u-flex" v-for="(item,index) in navList" :key="index" @click="jump(`/pages/house/oldHouse/list?id=${item.id}&title=${item.name}`)">
				<u-image width="100" height="100" :src="imgUrl(item.image)"></u-image>
				<text>{{item.name}}</text>
			</view>
			<!-- <view class="item u-flex" @click="jump()">
				<u-image width="100" height="100" :src="imgUrl('/uploads/20210922/d7d5a61ef733534f3ecdf841b12765e7.png')"></u-image>
				<text>首付买房</text>
			</view> -->
			<view class="item u-flex" @click="jump('/pages/map/index')">
				<u-image width="100" height="100" :src="imgUrl('/uploads/20210916/264107ef604dac07ea22722716939014.png')"></u-image>
				<text>地图找房</text>
			</view>
			<view class="item u-flex" @click="jump('/pages/house/publish/index')">
				<u-image width="100" height="100" :src="imgUrl('/uploads/20210922/637a6b9c35ad2dc5318b24147e3952f2.png')"></u-image>
				<text>我是业主</text>
			</view>
		</view>
		
		<view class="dropdown" id="dropdown">
			<u-dropdown @open="open" ref="dropdown" menu-icon="arrow-down-fill" menu-icon-size="18" active-color="#de1f1c">
				<u-dropdown-item :title="isSelectCity ? isSelectCity.name : '区域'">
					<drop-city-select @city-change="cityChange"></drop-city-select>
				</u-dropdown-item>
				<u-dropdown-item :title="houseprice ? `${houseprice.min}-${houseprice.max}元/m²` : '价格'" v-model="vm1" @change="chengeItem($event,1)" height="500" :options="com_price.map(item=>({label:`${item.min}-${item.max}元/m²`,value:item.id}))"></u-dropdown-item>
				<u-dropdown-item :title="housetype ? housetype.name : '房型'" v-model="vm2" @change="chengeItem($event,2)" height="500" :options="com_housetype.map(item=>({label:item.name,value:item.id}))"></u-dropdown-item>
				<u-dropdown-item :title="areaType ? `${areaType.min}-${areaType.max}m²` :'面积'" v-model="vm3" @change="chengeItem($event,3)" height="500" :options="com_area.map(item=>({label:`${item.min}-${item.max}m²`,value:item.id}))"></u-dropdown-item>
			</u-dropdown>
		</view>
		
		<!-- 更多列表 热门新房 -->
		<view class="more-list">
			<view class="more-item u-flex" v-for="item in list" :key="item.id" @click="jump(`/pages/house/oldHouse/detail?id=${item.id}`)">
				<view class="image">
					<u-image width="206" height="160" border-radius="18" :src="imgUrl(item.images)"></u-image>
				</view>
				<view class="info u-flex-1">
					<view class="title u-flex">
						<view class="name u-flex-1 u-ellipsis">{{item.name}}</view>
						<view class="label">
							<text v-if="item.is_selected_switch">精选</text>
							<text v-if="item.status === '1'" class="wait">待售</text>
							<text v-if="item.status === '2'">在售</text>
						</view>
					</view>
					<view class="position u-ellipsis" style="height: 32rpx;">{{item.title}}</view>
					<view class="label-list u-ellipsis">
						<text v-for="f in item.housebaseset_features" :key="f.id">{{f.name}}</text>
					</view>
					<view class="price-box u-flex">
						<view class="price">{{Number(item.totalprice)}}万</view>
						<!-- <view class="text">建面85-114m²</view> -->
						<view class="text">{{Number(item.unitprice)}}元/m²</view>
					</view>
				</view>
			</view>
			<view class="more" v-if="list.length == 20" @click="jump('/pages/house/oldHouse/list')">查看更多<text class="iconfont icon-jiantouyou"></text></view>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner:'',
				navList:'',
				list:'',
				isSelectCity:'',//选中的城市
				housetype:'',
				areaType:'',
				houseprice:'',
				vm1:'',
				vm2:'',
				vm3:''
			}
		},
		methods: {
			bannerClick(index){
				this.$app.eventJump(this.banner[index].url)
			},
			open(index){
				uni.pageScrollTo({
					selector:'#dropdown'
				})
			},
			getList(){
				this.$u.api.secondhandhouse.index({
					housebaseset_housetype_id:this.housetype.id || '',
					region_id:this.isSelectCity.id || '',
					price_id:this.houseprice.id || '',
					area_id:this.areaType.id || ''
				}).then(res=>this.list = res)
			},
			cityChange(e){
				if(e){
					this.isSelectCity = e.city
					this.$refs.dropdown.highlight(0,!0)
				}else{
					this.isSelectCity = ''
					this.$refs.dropdown.highlight(0,!1)
				}
				this.getList()
				this.$refs.dropdown.close()
			},
			chengeItem(e,index){
				if(index === 1){
					if(this.com_price[e].id === this.houseprice.id){
						this.houseprice = ''
						this.vm1 = ''
						this.$refs.dropdown.highlight(index,!1)
					}else{
						this.houseprice = this.com_price[e]
						this.$refs.dropdown.highlight(index,!0)
					}
				}
				
				if(index === 2){
					if(this.com_housetype[e].id === this.housetype.id){
						this.housetype = ''
						this.vm2 = ''
						this.$refs.dropdown.highlight(index,!1)
					}else{
						this.housetype = this.com_housetype[e]
						this.$refs.dropdown.highlight(index,!0)
					}
				}
				
				if(index === 3){
					if(this.com_area[e].id === this.areaType.id){
						this.areaType = ''
						this.vm3 = ''
						this.$refs.dropdown.highlight(index,!1)
					}else{
						this.areaType = this.com_area[e]
						this.$refs.dropdown.highlight(index,!0)
					}
				}
				
				this.getList()
			}
		},
		onLoad() {
			this.getList()
			this.$u.api.secondhandhouse.banner().then(res=>this.banner = res)
			this.$u.api.secondhandhouse.type().then(res=>this.navList = res)
		}
	}
</script>

<style lang="scss">
	// 搜索框
	.search{padding: 0 30rpx;}
	.search-box{background-color: #fff;border-radius: 50rpx;height: 96rpx;font-weight: bold;box-shadow: 0 4rpx 8rpx #ddd;
		.left-box{width: 150rpx;border-right: 2rpx solid #999;justify-content: center;
			.text{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: right;}
			.iconfont{color: #666;font-size: 30rpx;font-weight: normal;padding-left: 8rpx;margin-bottom: 4rpx;}
		}
		.centre-box{flex: 1;justify-content: center;color: #999;margin-right: 150rpx;
			.iconfont{color: #333;font-weight: normal;padding-right: 14rpx;font-size: 30rpx;}
		}
		image{width: 26rpx;height: 34rpx;margin-right: 10rpx;}
	}
	// banner
	.banner{padding: 45rpx 30rpx 0 30rpx;}
	// 金刚区
	.nav-list{
		background-color: #fff;padding: 40rpx 20rpx 0;
		.item{width: 25%;flex-direction: column;justify-content: center;
			// image{width: 100rpx;height: 100rpx;display: block;}
			text{display: block;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;padding: 14rpx 0;}
		}
	}
	
	// 底部更多列表
	.more-list{
		background-color: #fff;padding: 0 30rpx 20rpx;position: relative;
		.more-item{
			padding: 30rpx 0 10rpx 0;
			.image{
				image{width: 206rpx;height: 160rpx;border-radius: 20rpx;display: block;}
			}
			.info{
				margin-left: 20rpx;overflow: hidden;
				.title{
					.name{font-size: 30rpx;
							font-weight: bold;
							// line-height: 30rpx;
					  //   max-height: 60rpx;
					  //   overflow: hidden;
					  //   display: -webkit-box;
					  //   -webkit-line-clamp: 2;
					  //   -webkit-box-orient: vertical
					}
					.label{align-self: flex-start;
						text{background-color: $tc;color: #fff;font-size: 24rpx;padding: 2rpx 8rpx;border-radius: 6rpx;margin: 0 6rpx;}
						.wait{background-color: #999;}
					}
				}
				.position{font-size: 24rpx;color: #666;}
				.label-list{white-space: nowrap;
					text{color: #ffa100;font-size: 26rpx;margin-right: 20rpx;
						&:last-child{margin-right: 0;}
					}
				}
				.price-box{
					.price{color: #f00;font-size: 30rpx;font-weight: bold;}
					.text{margin-left: 30rpx;font-size: 26rpx;color: #666;}
				}
			}
			
		}
		.more{text-align: center;font-size: 30rpx;color: #666;padding: 20rpx 0 10rpx 0;
			.iconfont{margin-left: 14rpx;}
		}
	}
	
	.dropdown{
		border-bottom: 1rpx solid #ddd;position: sticky;top: 0;width: 100%;background-color: #fff;z-index: 11;
	}
</style>